<template>
  <div class="app-container">
    <el-card>
      <div class="ma__b__15">
        <el-button
          type="success"
          :icon="Plus"
          @click="showAddDialog({ isEdit: false, row: null })"
          >新增</el-button
        >
      </div>
      <el-table
        :data="tableData"
        :border="parentBorder"
        style="width: 100%"
        v-loading="loading"
      >
        <el-table-column type="expand">
          <template #default="props">
            <div class="app__children__table__container">
              <el-table :data="props.row.children" :border="childBorder">
                <el-table-column label="权限名称" prop="name" />
                <el-table-column label="路由" prop="route" />
                <el-table-column
                  label="操作"
                  fixed="right"
                  width="250"
                  align="center"
                >
                  <template #default="props">
                    <div>
                      <el-button
                        type="primary"
                        @click="showAddDialog({ isEdit: true, row: props.row })"
                        >编辑</el-button
                      >
                      <el-button
                        type="danger"
                        @click="delPermission(props.row.id)"
                        >删除</el-button
                      >
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="权限名称" prop="name" />
        <el-table-column label="路由" prop="route" />
        <el-table-column label="操作" fixed="right" width="250" align="center">
          <template #default="props">
            <div>
              <el-button
                type="primary"
                :icon="Edit"
                @click="showAddDialog({ isEdit: true, row: props.row })"
                >编辑</el-button
              >
              <el-button
                type="danger"
                :icon="Delete"
                @click="delPermission(props.row.id)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <AddPermissionDialog
      ref="addPermissionDialogRef"
      @success="addPermissionDialogSuccess"
    />
  </div>
</template>

<script lang="ts" setup name="Permission">
import {
  getPermissionList,
  deletePermissionList,
} from "@/api/permission/index";
import { Plus, Edit, Delete } from "@element-plus/icons-vue";
import AddPermissionDialog from "./components/AddPermissionDialog.vue"; // 新增权限弹窗

const parentBorder = ref(true);
const childBorder = ref(true);
const tableData = ref<any[]>([]);
const loading = ref<boolean>(false);
// 获取权限列表
const getPermissionListService = async () => {
  let params = {};
  loading.value = true;
  let res = await getPermissionList(params);
  loading.value = false;
  if (res) {
    console.log("权限列表返回结果 ", res);
    tableData.value = [...res.data.list];
  }
};
getPermissionListService();

// 删除权限
const delPermission = (id: number) => {
  console.log("点击勒删除  ", id, typeof id);
  ElMessageBox.confirm("您确定要删除该权限吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      deletePermissionListService(id);
    })
    .catch(() => {
      ElMessage({
        message: "已取消",
        type: "info",
      });
    });
};

// 调用删除权限接口
const deletePermissionListService = async (id: number) => {
  let params = {};
  let res = await deletePermissionList(String(id), params);
  if (res) {
    ElMessage({
      type: "success",
      message: "删除成功",
    });
    getPermissionListService();
  }
};

// 打开新增权限弹窗
const addPermissionDialogRef = ref<typeof AddPermissionDialog | null>(null);
interface editData {
  isEdit: boolean;
  row: any;
}
const showAddDialog = (data: editData) => {
  if (!addPermissionDialogRef.value) return;
  addPermissionDialogRef.value.handleOpen(data, tableData.value);
};
const addPermissionDialogSuccess = () => {
  getPermissionListService();
};
</script>

<style lang="scss" scoped>
.app-container {
  .app__btn__container {
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--el-border-color);
  }
  .app__children__table__container {
    padding-left: 50px;
  }
}
</style>
